<template>
  <div>
    <div class="fly-home fly-panel" style="background-image: url();">
      <img v-if="curUserInfo.pic" :src="curUserInfo.pic" />
      <h1>
        {{curUserInfo.name}}
        <i class="iconfont icon-nan" v-if="curUserInfo.gender === '0'"></i>
        <i v-else class="iconfont icon-nv"></i>
        <el-tag
          style="margin-left: 10px;"
        >{{curUserInfo.isVip === '0' ? '普通会员': 'VIP' + curUserInfo.isVip}}</el-tag>
      </h1>
      <p class="fly-home-info">
        <i class="iconfont icon-kiss" title="飞吻"></i>
        <span style="color: #FF7200;">{{curUserInfo.favs}} 积分</span>
        <i class="iconfont icon-shijian"></i>
        <span>{{curUserInfo.created | moment}} 加入</span>
        <i class="iconfont icon-chengshi"></i>
        <span>{{curUserInfo.location ? curUserInfo.location : '未知地'}}</span>
      </p>

      <p class="fly-home-sign">{{curUserInfo.regmark ? curUserInfo.regmark : '这个人太懒了，什么都没有写...'}}</p>
      <div class="fly-sns">
        <el-tag type="success">关注</el-tag>
        <span>{{followers.length}}</span>
        <el-tag type="danger" style="margin-left:10px;">粉丝</el-tag>
        <span>{{fans.length}}</span>
      </div>
      <div class="fly-sns" v-if="userInfo._id !== this.uid">
        <el-button v-if="!isFollowed" @click="handleAddFllow" type="success">关注Ta</el-button>
        <el-button v-if="isFollowed" type="info" @click="handleDelFllow">取消关注</el-button>
        <el-button type="primary">
          <router-link :to="{name: 'chat', params: {uid: this.uid}}">私信</router-link>
        </el-button>
      </div>
    </div>

    <div class="layui-container">
      <el-tabs v-model="activeName">
        <el-tab-pane label="提问" name="first">
          <div class="layui-col-md12 fly-home-jie">
            <div class="fly-panel">
              <h3 class="fly-panel-title">{{curUserInfo.name}} 最近7天的提问</h3>
              <ul class="jie-row">
                <li v-for="(item,index) in postList" :key="'postlist' + index">
                  <div
                    class="fly-list-badge"
                    v-show="item.tags.length > 0 && item.tags[0].name !== ''"
                  >
                    <span
                      class="layui-badge"
                      v-for="(tag, index) in item.tags"
                      :key="'tag' + index"
                      :class="tag.class"
                    >{{tag.name}}</span>
                  </div>
                  <router-link
                    class="jie-title link"
                    :to="{name:'detail', params: {tid: item._id}}"
                  >{{item.title}}</router-link>
                  <i>{{item.created | moment}}</i>
                  <em class="layui-hide-xs">{{item.reads}}阅/{{item.answer}}答</em>
                </li>
                <div
                  v-show="postList.length === 0"
                  class="fly-none"
                  style="min-height: 50px; padding:30px 0; height:auto;"
                >
                  <i style="font-size:14px;">没有发表任何求解</i>
                </div>
              </ul>
            </div>
          </div>
        </el-tab-pane>
        <el-tab-pane label="回答" name="second">
          <div class="layui-col-md12 fly-home-da">
            <div class="fly-panel">
              <h3 class="fly-panel-title">{{curUserInfo.name}} 最近7天的回答</h3>
              <ul class="home-jieda">
                <li v-for="(item,index) in commentList" :key="'comments' + index">
                  <p>
                    <span>{{item.created | moment}}</span>
                    在
                    <router-link
                      :to="item.tid? {name: 'detail', params: {tid: item.tid? item.tid._id : ''}} : {name: '404'}"
                    >{{item.tid ? item.tid.title: '(用户已经删除该贴)'}}</router-link>中回答：
                  </p>
                  <div class="home-dacontent" v-richtext="item.content"></div>
                </li>
                <div
                  v-show="commentList.length === 0"
                  class="fly-none"
                  style="min-height: 50px; padding:30px 0; height:auto;"
                >
                  <span>没有回答任何问题</span>
                </div>
              </ul>
            </div>
          </div>
        </el-tab-pane>
        <el-tab-pane label="私信列表" name="third" v-if="userInfo._id === this.uid">
          <div class="layui-col-md12 fly-home-da">
            <div class="fly-panel">
              <h3 class="fly-panel-title">{{curUserInfo.name}} 最近联系人</h3>
              <el-row>
                <el-col :span="6" v-for="chat in chatlist" :key="chat._id">
                  <el-card>
                    <div class="card-container">
                      <div class="image-container">
                        <img :src="chat.user.pic" class="image" />
                      </div>
                      <div class="info-container">
                        <span class="name">{{chat.user.name}}</span>
                        <i :class="chat.user.gender === '1' ? 'el-icon-male' : 'el-icon-female'"></i>
                        <div class="middle">
                          <i class="el-icon-chat-dot-round"></i>
                          <time class="time">{{ chat.lastMsgTime | moment }}</time>
                        </div>
                        <div class="bottom">
                          <router-link :to="{name:'home', params: {uid: chat.user._id}}">访问主页</router-link>
                          <router-link :to="{name:'chat', params: {uid: chat.user._id}}">去聊天</router-link>
                        </div>
                      </div>
                    </div>
                  </el-card>
                </el-col>
              </el-row>
            </div>
          </div>
        </el-tab-pane>
      </el-tabs>
    </div>
  </div>
</template>

<script>
import {
  getInfo,
  getPostPublic,
  getCommentList,
  addFllower,
  delFllower,
  getFans,
  getFollowers
} from '../api/user'
import { getChatlist } from '../api/chat'
import { mapGetters } from 'vuex'
import moment from 'dayjs'
export default {
  name: 'home',
  props: ['uid'],
  data() {
    return {
      postList: [],
      commentList: [],
      curUserInfo: {},
      activeName: 'first',
      start: '',
      end: '',
      fans: [],
      followers: [],
      isFollowed: false,
      chatlist: []
    }
  },
  computed: {
    ...mapGetters(['userInfo'])
  },
  created() {
    this.init()
  },
  methods: {
    // 初始化
    init() {
      this.end = moment().add(1, 'day').format('YYYY-MM-DD')
      this.start = moment()
        .subtract(6, 'days')
        .format('YYYY-MM-DD')
      this.getPostList()
      this.getCommentList()
      this.getUserInfo()
      this.getFansList()
      this.getFolllowers()
      this.getChatlist()
    },
    // 获取私信列表
    async getChatlist() {
      const res = await getChatlist()
      console.log('chatlist', res)
      if (res.code === 200) {
        this.chatlist = res.data
      }
    },
    // 获取关注人列表
    async getFolllowers() {
      const res = await getFollowers({
        userID: this.uid
      })
      this.followers = res.data
    },
    // 获取粉丝列表
    async getFansList() {
      const res = await getFans({
        uid: this.uid
      })
      this.fans = res.data
      const isExsit = this.fans.some(item => {
        return item.userId._id === this.userInfo._id
      })
      this.isFollowed = isExsit
    },
    // 取消关注
    async handleDelFllow() {
      const userId = this.userInfo._id // 用户
      const followerId = this.uid // 被关注的人
      const res = await delFllower({
        userId,
        followerId
      })
      if (res.code === 200) {
        this.$message('取消关注成功')
        this.isFollowed = false
      }
    },
    // 添加关注
    async handleAddFllow() {
      const res = await addFllower({
        userId: this.uid
      })
      if (res.code === 200) {
        this.$message('关注成功')
        this.isFollowed = true
      }
    },
    // 获取最近7天发帖记录
    async getPostList() {
      const res = await getPostPublic({
        uid: this.uid,
        page: 0,
        limit: 0,
        start: this.start,
        end: this.end
      })
      if (res.code === 200) {
        this.postList = res.data
      }
    },
    // 获取最近7天评论记录
    async getCommentList() {
      const res = await getCommentList({
        uid: this.uid,
        page: 0,
        limit: 0,
        start: this.start,
        end: this.end
      })
      if (res.code === 200) {
        this.commentList = res.data
      }
    },
    // 获取当前用户的基本信息
    async getUserInfo() {
      const res = await getInfo({ uid: this.uid })
      if (res.code === 200) {
        this.fullscreenLoading = false
        this.curUserInfo = res.data
      }
    }
  },
  watch: {
    $route(to, from) {
      this.init()
      this.activeName = 'first'
    }
  }
}
</script>

<style lang="scss" scoped>
.link {
  font-size: 16px;
  color: cadetblue;
}
.card-container {
  display: flex;
  .image-container {
    width: 80px;
    height: 80px;
    .image {
      width: 100%;
      height: 100%;
      border-radius: 100%;
    }
  }
  .info-container {
    flex: 1;
    margin-left: 10px;
    .name {
      color: coral;
    }
    .middle {
      margin-top: 8px;
      margin-bottom: 6px;
    }
    .bottom {
      display: flex;
      width: 100%;
      flex-direction: row;
      align-content: space-between;
      a {
        padding: 4px 8px 8px 0;
      }
    }
  }
}
</style>
